<template>
  <movable-area class="movable-area">
    <movable-view
      :style="{
        height: height + 'px',
        width: width + 'px',
        backgroundColor: backgroundColor,
        opacity: opacity,
      }"
      class="movable-view"
      direction="all"
      out-of-bounds
    >
      <text class="text" :style="{ color: textColor }">{{ text }}</text>
      <text class="icon"></text>
    </movable-view>
  </movable-area>
</template>
<script lang="ts" setup>
withDefaults(
  defineProps<{
    height: number // 高度
    width: number // 宽度
    text: string // 文字
    backgroundColor: string // 背景颜色
    opacity: number // 透明度
    textColor: string // 文字颜色
  }>(),
  {
    height: 50,
    width: 50,
    text: '客服',
    backgroundColor: '#ffffff',
    opacity: 1,
    textColor: '#000000',
  },
)
</script>
<style lang="scss" scoped>
.movable-area {
  pointer-events: none;
  z-index: 100;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .movable-view {
    pointer-events: auto;
    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.3);
    border-radius: 50% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}
</style>
